<template>
    <div class="Login">
        <div class="T">
            <h1>物易近——管理员登录</h1>
        </div>
        <div class="A">
            <form :v-model="admin">
            <div class="a">
                <span>用户名</span>
                <input type="text"  placeholder="请输入用户名" v-model="admin.username"><br>
            </div>
            <div class="b">
                <span>密码</span>
                <input type="password"  placeholder="请输入密码" v-model="admin.password"><br>
            </div>
            <div class="f">
                <div class="c">
                    <input type="submit" value="登录" @click="login()">
                </div>
            </div>
        </form>
        </div>
    </div>


</template>

<script>
import axios from 'axios'
import { reactive, toRefs, ref } from "@vue/reactivity";
import { ElMessage } from "element-plus";
export default {
    setup() {
    const form = reactive({
      password: "",
      isAgree: 0,
    });
    const registerForm = reactive({
      rPassword: "",
      confirmPassword: "",
      identifyCode: "",
      rAgree: 0,
    });

    // 方法
    // 登录 将账号密码写入后台,获取用户数据,后登录
    // 需要修改共享数据
    function login() {
      console.log(form);
    }
    // 注册 -- 将账号密码写入后台, 自动登录
    // 需要修改共享数据
    function register() {
      console.log("注册", registerForm);
    }
    // 确认密码
    const confirmFunc = () => {
      if (registerForm.confirmPassword !== registerForm.rPassword)
        ElMessage.error("密码与确认密码不一致.");
    };
    // 修改密码
    let isChangePassword = ref(false);
    // 用的是注册参数
    function changePassword() {}

    return {
      isChangePassword,
      ...toRefs(form),
      ...toRefs(registerForm),
      login,
      register,
      confirmFunc,
      changePassword,
    };
  },
    
   data() {
      return {
        admin:{
            username:"",
            password:"",
        },

      }
    },

    methods:{
        login(){
            
            var param = "?username="+this.admin.username;
            param += "&password="+this.admin.password;

            console.log(param);
           axios.post("admin/login",{
                username:this.admin.username,
                password:this.admin.password
            }).then((res)=>{
                if(res.data.code == 1){
                    ElMessage.success("登录成功！");
                    window.sessionStorage.setItem("token",res.data.data);
                   this.$router.push({name:"administrators"}) 
                }
                else{ElMessage.error("账号或密码错误，请重新输入！")}
                
            }).catch(err=>{
                console.log(err);
            }).finally(()=>{
                this.admin={}
            });
        },
    },

};
</script>

<style lang="scss" scoped>
    .Login{
        background:url("../assets/img/3.jpg");
        width:100%;
        height:100%;
        position:fixed;
        background-size:100% 100%;
    }
    .T{
        text-align: center;
    }
    .A{
        border:1px solid #dccfcf;
  width: 350px;
  margin:180px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color:rgba(255,255,255,0.7);
  text-align: center;
  .e{
    font-size: 28px;
    padding-left: 20%;
}
.p{
    font-size: 28px;
    padding-left: 6px;
}
        .a{
            margin-top: 40px;
            margin-left: 20px;
            input{
                margin-left: 15px;
            }
        }
        .b{
            margin-top: 25px;
            margin-left: 20px;
            input{
                margin-left: 30px;
            }
        }

        .f{
            margin-top: 30px;
            //display: flex;
            text-align: center;
            .c{
                margin-left: 20%;
                input{
                    background-color: #fff;
                    width: 80px;
                    height: 32px;
                }
            }
            .d{
                width: 80px;
                height: 32px;
                background-color: rgba(0,0,0,.5);
                span{
                    color: #fff;
                }
                margin-left: 20%;
            }
        }
        .floatR{
            margin-top: 40px;
            margin-left: 25%;
            font-size: 13px;
            color: rgb(0, 94, 255);
        } 
    }
    .ti{
        text-align: center;
    }
</style>